<template>
	<view class="register-page">
		<view class="user-profile">
			<view class="user-label">头像</view>
			<view class="user-img">
				<uv-upload :fileList="fileList" name="1" :maxCount="1" :previewFullImage="true" @afterRead="afterRead"
					@delete="deletePic"></uv-upload>
			</view>
		</view>
		<view class="form-box">
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
				<uv-form-item labelWidth="140rpx" label="昵称" prop="userInfo.nickName" borderBottom>
					<uv-input v-model="model1.userInfo.nickName" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="姓名" prop="userInfo.userName" borderBottom>
					<uv-input v-model="model1.userInfo.userName" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="性别" prop="userInfo.sexName" borderBottom
					@click="showSexSelect">
					<uv-input v-model="model1.userInfo.sexName" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="手机号码" prop="userInfo.phonenumber" borderBottom>
					<uv-input v-model="model1.userInfo.phonenumber" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="验证码" prop="userInfo.yzm" borderBottom>
					<uv-input v-model="model1.userInfo.yzm" border="none">
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></uv-code>
							<uv-button @click="getCode" :text="tips" type="success" size="mini"></uv-button>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="出生年月" prop="userInfo.birthDate" borderBottom @click="open()">
					<uv-input v-model="model1.userInfo.birthDate" border="none" placeholder="请选择出生年月"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item labelWidth="140rpx" label="隐私" prop="userInfo.privacyName" borderBottom
					@click="showprivacySelect()">
					<uv-input v-model="model1.userInfo.privacyName" disabled disabledColor="#ffffff" placeholder="请选择隐私"
						border="none">
					</uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>
				<uv-button type="primary" color="#5ebcbc" text="立即注册" customStyle="margin-top: 10px"
					@click="submit"></uv-button>
				<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
			</uv-form>
			<uv-action-sheet ref="sexSelect" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@select="sexSelect">
			</uv-action-sheet>
			<uv-datetime-picker ref="datetimePicker" v-model="datetime" mode="date" @confirm="confirm">
			</uv-datetime-picker>
			<uv-action-sheet ref="privacySelect" :actions="privacyActions" title="请选择隐私权限" @select="privacySelect">
			</uv-action-sheet>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						userName: '',
						nickName: '',
						sex: '',
						sexName: '',
						phonenumber: '',
						privacy: '',
						privacyName: '',
						birthDate: '',
						yzm: '',
					},
				},
				actions: [{
					name: '男',
					value: 0,
				}, {
					name: '女',
					value: 1,
				}, {
					name: '未知',
					value: 2,
				}, ],
				privacyActions: [{
					name: '公开',
					value: 1,
				}, {
					name: '保密',
					value: 0,
				}],
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: false,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.nickName': {
						type: 'string',
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},
					'userInfo.phonenumber': {
						type: 'number',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.privacyName': {
						type: 'string',
						required: false,
						message: '请选择隐私',
						trigger: ['blur', 'change']
					},
					'userInfo.birthDate': {
						type: 'string',
						required: false,
						message: '请选择出生年月',
						trigger: ['blur', 'change']
					},
					'userInfo.yzm': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
				
				radio: '',
				switchVal: false,
				tips: '',
				seconds: 10,
				datetime: new Date(),
				fileList: [],
				avatar: null, //头像地址
				birthDate:new Date()
			}
		},
		methods: {
			// 提交
			async submit() {
				// console.log(await this.$refs.form.validate())
				if (await this.$refs.form.validate()) {
					const {
						userName,
						nickName,
						sex,
						phonenumber,
						privacy,
						birthDate,
						yzm
					} = this.model1.userInfo
					let res = await this.muajax.appRegister({
						username:userName,
						nickName,
						sex,
						phonenumber,
						privacy,
						// birthDate:new Date(this.birthDate),
						birthDate:this.birthDate,
						code: yzm,
						isLoginType: 2,
						avatar: this.avatar
					})
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '注册成功'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				// 	this.$refs.form.validate().then(res => {


				// 	}).catch(errors => {
				// 		uni.showToast({
				// 			icon: 'error',
				// 			title: '校验失败'
				// 		})
				// 	})
			},
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			// 性别选择
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 性别选择返回结果
			sexSelect(e) {
				this.model1.userInfo.sex = e.value;
				this.model1.userInfo.sexName = e.name;
			},

			// 性别选择
			showprivacySelect() {
				this.$refs.privacySelect.open();
				this.hideKeyboard();
			},
			// 性别选择返回结果
			privacySelect(e) {
				console.log(e)
				this.model1.userInfo.privacy = e.value;
				this.model1.userInfo.privacyName = e.name;
			},

			hideKeyboard() {
				uni.hideKeyboard()
			},
			codeChange(text) {
				this.tips = text;
			},
			// 获取短信验证码
			async getCode() {
				if (!this.model1.userInfo.phonenumber) {
					uni.showToast({
						icon: 'error',
						title: '请输入手机号'
					})
					return false
				}
				if (!this.$test.phone(this.model1.userInfo.phonenumber)) {
					this.toast({
						icon: 'error',
						title: '手机号格式不正确'
					});
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					this.toast.loading({
						title: '正在获取验证码'
					})
					const res = await this.muajax.getsmsCode({
						phonenumber: this.model1.userInfo.phonenumber
					})
					if (res.code == 200) {
						uni.hideLoading()
						this.$refs.uCode.start();
						this.toast.alert({
							title: '验证码弹窗',
							content: res.msg
						})
						// this.toast('验证码已发送');
					}
				} else {
					this.toast('倒计时结束后再发送');
				}
			},

			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				console.log(this.$timef(e.value, 'Y-m-d'))
				this.model1.userInfo.birthDate = this.$timef(e.value, 'Y-m-d');
				this.birthDate=e.value

			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				if(event&&event.file.url){
					let file = event.file
					this.fileList = [{
						url:file.url
					}]
					let {
						data,
						code
					} = await this.muajax.UploadFiles({}, {
						filePath: file.url,
						name: 'file',
					})
					this.avatar = data.ossId
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.register-page {
		padding: 20rpx 20rpx;

		.form-box {
			background: #fff;
			padding: 0px 20rpx;
			box-sizing: border-box;
		}
	}

	.user-profile {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx 20rpx;
		margin-bottom: 20rpx;

		.user-label {
			width: 140rpx;
		}
	}
</style>